<template>
  <div class="app-container">
    <div class="form-container">
          <el-form ref="searchForm" :model="searchForm" label-width="80px">
            <el-row :gutter="20">
                <el-col :span="6">
                    <el-form-item label="供应商" prop="supId">
                      <el-select v-model="searchForm.supId" 
                        clearable filterable placeholder="请选择供应商" >
                          <el-option
                            v-for="item in suppliers"
                            :key="item.id"
                            :label="item.name"
                            :value="item.id">
                            <span style="float: left">{{ 'ID: ' + item.id }}</span>
                            <span style="float: right;  font-size: 14px">{{ item.name }}</span>
                          </el-option>
                      </el-select>
                    </el-form-item>
                </el-col>
                  <el-col :span="12">
                      <el-form-item  label="时间范围" prop="time">
                            <el-date-picker
                                v-model="searchForm.time"
                                type="daterange"
                                range-separator="至"
                                start-placeholder="开始日期"
                                end-placeholder="结束日期">
                            </el-date-picker>
                      </el-form-item>
                </el-col>
                <el-col :span="6">
                  <el-button icon="el-icon-search" type="primary" circle @click="getData" />
                  <el-button icon="el-icon-refresh-right" type="warning" size="medium" round @click="resetForm('searchForm')">
                      重置
                    </el-button>
              </el-col>
            </el-row>
        </el-form>
    </div>
    <div class="main">
      <div class="temp">
        <div id="storeManage" style="height: 100%; -webkit-tap-highlight-color: transparent; user-select: none;" ></div>
      </div>
    </div>

  </div>
   
</template>


<script>


export default {
  data() {
    return {
      suppliers: [],
      option: {
          legend: {
              top: 'bottom'
          },
          toolbox: {
              show: true,
              feature: {
                  mark: {show: true},
                  dataView: {show: true, readOnly: false},
                  restore: {show: true},
                  saveAsImage: {show: true}
              }
          },
          series: [
              {
                  name: '面积模式',
                  type: 'pie',
                  radius: [100, 250],
                  center: ['50%', '50%'],
                  roseType: 'area',
                  itemStyle: {
                      borderRadius: 20
                  },
                  data: [
                      // {value: 40, name: '产品1'},
                      // {value: 38, name: '产品2'},
                      // {value: 32, name: '产品3'},
                      // {value: 30, name: '产品4'},
                      // {value: 28, name: '产品5'},
                      // {value: 26, name: '产品6'},
                      // {value: 22, name: '产品7'},
                      // {value: 18, name: '产品8'}
                  ]
              }
          ]
      },
      storeManages:[],
      searchForm: {
        supId: '',
        time:[],
        isIn:1 // 1 出货
      },

    };
  },
  methods: {
      async getData() {  
        this.option.series[0].data = []
       // 获取供应商信息
        let res = await this.$store.dispatch('supplier/getList',{name:''}) 
        if(res.code == 1) {
            this.suppliers = res.data 
        }else{
            this.$message({ showClose: true,message: res.msg, type: 'error'})
        }

        res = await this.$store.dispatch('storeManage/storeManageChart',this.searchForm) 
          if(res.code == 1) {
              this.storeManages = res.data 
              // 获取到数据
              console.log(this.storeManages);
              // console.log(this.option);
              console.log(this.option.series[0].data);
                for(let i=0; i < this.storeManages.length; i++) {
                  console.log(this.storeManages[i].num + this.storeManages[i].product.name);
                  let num = this.storeManages[i].num
                  let name = this.storeManages[i].product.name + num
                    this.option.series[0].data.push({value:num,name: name })
                }
              
              this.initData()





          }else{
              this.$message({ showClose: true,message: res.msg, type: 'error'})
          }
      },
      initData() {
          //初始化数据
        // 基于准备好的dom，初始化echarts实例

        var myChart = this.$echarts.init(document.getElementById('storeManage'));
        // 绘制图表
        console.log(this.option);
        myChart.setOption(this.option);
      },
      resetForm(searchForm) {
        this.$refs[searchForm].resetFields()
        this.$message({  message: '清空成功', type: 'success'})
      }
    },
    mounted() {
      this.getData()
    }
  }
  </script>

<style lang="scss" scoped>
  .form-container {
    display: flex;
    width: 100%;
    align-items:center;
    justify-content:center;
  }
  .search {
    width: 100%;
    text-align: center;
    padding-left: 20px;
  }
  .main{
    // margin-top: 50px;
    width: 100%;
    height: 100%
  }
  .temp{
    width: 600px;
    margin: 0 auto;
    height: 600px;
  }
</style>







